<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="新增关注"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </header>
    <div class="content">
      <!-- van-swipe-cell ui库组件 -->
      <van-swipe-cell v-for="(item, index) in newlist" :key="index">
        <van-cell>
          <!-- 消息整体框 -->
          <div class="newbox">
            <!-- 头像区域 -->
            <!-- 点击头像查看个人中心 -->
            <div class="img" @click="SeeDetailsFn(item.id)">
              <img :src=item.img alt="">
            </div>
            <!-- 消息区域 -->
            <div class="new">
              <!-- 左侧昵称,时间 -->
              <div class="newleft">
                <p class="name">{{ item.name }}</p>
                <p class="time">{{ item.time }} 开始关注你了</p>
              </div>
              <!-- 右侧关注按钮 -->
              <button v-if="item.isfollow === 0" class="newright" @click="followYesFn(item.id, index)">关注</button>
              <button v-else class="newright" @click="followNoFn(item.id, index)">互相关注</button>
            </div>
          </div>
        </van-cell>
        <!-- 删除 -->
        <template #right  right-width=".55rem">
          <van-button square type="danger" text="删除" @click="deleteFn(index)"/>
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, SwipeCell, Button, Cell, Dialog } from 'vant'
Vue.use(NavBar)
Vue.use(SwipeCell)
Vue.use(Button)
Vue.use(Cell)
export default {
  // 设置data初始值
  data () {
    return {
      newlist: [
        {
          id: '01', // 该关注用户id
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'), // 头像
          name: 'soamgwe', // 昵称
          time: '04-26 15：15', // 时间
          isfollow: 0, // 是否已关注,0 为未关注,1为已关注(即为0时显示关注按钮,点击关注后0变1,由关注按钮变为互相关注,再继续点击就又1变0了)
          ReadOrNot: 0 // 当前的用户是否为新增关注的用户(初始值为0,即新增关注的用户)
        },
        {
          id: '02', // 该关注用户id
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'), // 头像
          name: 'asda', // 昵称
          time: '04-27 15：15', // 时间
          isfollow: 1, // 是否已关注,0 为未关注,1为已关注(即为0时显示关注按钮,点击关注后0变1,由关注按钮变为互相关注,再继续点击就又1变0了)
          ReadOrNot: 0 // 当前的用户是否为新增关注的用户(初始值为0,即新增关注的用户)
        },
        {
          id: '03', // 该关注用户id
          img: require('../../../lib/img/my_news/xitongxiaoxi@2x.png'), // 头像
          name: 'Winfred', // 昵称
          time: '04-28 15：15', // 时间
          isfollow: 0, // 是否已关注,0 为未关注,1为已关注(即为0时显示关注按钮,点击关注后0变1,由关注按钮变为互相关注,再继续点击就又1变0了)
          ReadOrNot: 0 // 当前的用户是否为新增关注的用户(初始值为0,即新增关注的用户)
        }
      ]
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    // 查看关注人详情(即个人页面)
    SeeDetailsFn (id) {
      // console.log('查看详情', id)
    },
    // 点击关注
    // 注意这个index只是前端实现了点击切换按钮的效果,后期接口出来就只需要根据接口来更改数据库中的该条数据后,再重新渲染即可
    followYesFn (id, index) {
      // console.log('关注', id)
      // console.log('下标', index)
      this.newlist[index].isfollow = 1
    },
    // 二次点击取消关注
    followNoFn (id, index) {
      // console.log('取消关注', id)
      // console.log('下标', index)
      Dialog.confirm({
        title: '取消关注',
        message: '确定要取消关注吗?',
        width: '2.5rem'
      }).then(() => {
        // on confirm
        this.newlist[index].isfollow = 0
      }).catch(() => {
        // on cancel
      })
    },
    // 删除
    deleteFn (index) {
      this.newlist.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  .content {
    // 新增关注人
    .newbox {
      padding: .10rem 0;
      display: flex;
      // 头像区域
      .img {
        width: .49rem;
        height: .49rem;
        // 头像图片
        img {
          height: 100%;
          width: 100%;
        }
      }
      // 右边的消息
      .new {
        flex: 1; // 将除了头像区域所占有的区域外的其他剩余空间全都分配给它
        display: flex;
        justify-content: space-between;
        margin-left: .08rem;
        // 左侧的昵称和时间
        .newleft {
          .name {
            font-size: .15rem;
            line-height: .20rem;
          }
          .time {
            font-size: .13rem;
            color: #828282;
            line-height: .20rem;
          }
        }
        // 右侧互相关注
        .newright {
          height: .24rem;
          width: .66rem;
          margin-top: .10rem;
          border: 1px #e7e7e7 solid;
          border-radius: .12rem;
          background-color: #ffffff;
          font-size: .10rem;
        }
      }
    }
    // 每一个单元格
    /deep/ .van-cell {
      border-bottom: 0.01rem solid #e5e5e5;
    }
    // 删除按钮
    /deep/ .van-button {
      height: .90rem;
    }
  }
</style>
